<template>
    <div class="register">
      <follow-view v-bind:follow="follow" v-on:follow-status="changeFollow"></follow-view>
      <header-component></header-component>
      <div class="register-cont">
        <form action="/api/vote/1/candidate" method="post" name="register" @submit.prevent="onSubmit">
          <div class="upload-warp">
            <img :src="registerInfo.preUrl">

          </div>
          <div class="upload-button">
            <input type="file" name="imgFile"  v-on:change="imgChangeFun" />
            照片选择
            <!--<vue-core-image-upload
              v-bind:class="['pure-button','pure-button-primary','js-btn-crop','mu-raised-button']"
              text="选择图片"
              inputOfFile="file"
              v-bind:crop="false" url="http://wc.callmesoul.cn/api/fileupload"
              extensions="png,gif,jpeg,jpg">
            </vue-core-image-upload>-->

          </div>
          <mu-text-field hintText="作品名称" v-model='registerInfo.title' name="title"  fullWidth /><br/>
          <mu-text-field hintText="真实姓名" v-model='registerInfo.realName' name="realName"  fullWidth /><br/>
          <mu-text-field hintText="电话号码" v-model='registerInfo.telNumber' fullWidth name="telNumber" /><br/>
          <button class="demo-raised-button " type="submit"><span>提交</span></button>

        </form>
      </div>
      <footer-msg></footer-msg>
    </div>

</template>
<style scoped>
.demo-raised-button{
  font-size: .16rem;
    background: #d9003c;
    color: #fff;
    border: 0;
    line-height: .4rem;
    width: 100%;
}
.demo-raised-button i{
  margin-right:0.05rem;
}

</style>

<script>
  import VueCoreImageUpload  from 'vue-core-image-upload';
  import HeaderComponent from './Header.vue'
  import FooterMsg from './FooterMsg.vue'
  var qs = require('qs');
  export default{
        data(){
            return{
                registerInfo:{
                  title:"",
                  realName:"",
                  telNumber:"",
                  imgFile: [],
                  preUrl:''
                },
                follow:false
            }
        },
        computed:{
        },
        components:{
            HeaderComponent,
            'vue-core-image-upload': VueCoreImageUpload,FooterMsg
        },
        events: {
          imageUploaded(res) {
            if (res.errcode == 0) {
              console.log(res);
            }
          }
        },
        methods:{
          onSubmit: function(e) {
            console.log(this.registerInfo.imgFile);
            if(this.registerInfo.title===''){
              alert("请填写作品名称");
              return false;
            }
            if(this.registerInfo.imgFile.length<=0){
              alert("请选择参赛作品");
              return false;
            }
            if(this.registerInfo.truename===''){
              alert("请填写真实姓名");
              return false;
            }
            if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.registerInfo.telNumber))){
                alert("请填写正确的手机号码");
                return false;
            }
            var formData = new FormData();
            formData.append("imgFile",this.registerInfo.imgFile);
            formData.append("realName",this.registerInfo.realName);
            formData.append("telNumber",this.registerInfo.telNumber);
            formData.append("title",this.registerInfo.title);
            console.log(formData);
            this.axios.post("/api/vote/1/candidate",formData).then((response) => {
              if(response.data.code===200){
                alert("报名成功！待审核通过即可！");
                this.$router.push({ name: 'index'});
              }else{
                alert(response.data.message);
                return false;
              }
            })

          },
          imgChangeFun:function(e){
            var file = e.target.files[0];
            console.log(file);
            var supportedTypes = ['image/jpg', 'image/jpeg', 'image/png'];
            if (file && supportedTypes.indexOf(file.type) >= 0) {
                this.registerInfo.imgFile = e.target.files[0];
                this.registerInfo.preUrl=this.getObjectURL(file);
            } else {
                alert('文件格式只支持：jpg、jpeg 和 png');
                this.clearFile();
                this.registerInfo.preUrl="";
            }
          },
          getObjectURL:function(file){
            var reader = new FileReader();
            reader.readAsDataURL(file);
            var url ="";
            url = window.URL.createObjectURL(file);
            return url ;
          },
          changeFollow:function(msg){
            this.follow=msg;
          }
    }
}

</script>
